<template>
  <div>
    <div class="result-container">
      <div
        class="filter-container"
        :class="isShowFilter && windowWidth > 900 ? '' : 'filter-container__hidden'">

      </div>
      <div
        class="result-list">
        <div
          class="result-item"
          v-for="item in searchResultList"
          :key="item.id"
          @click="gotoTeacherDetail(item.id)">
          <v-avatar class="mr-1 align-self-center">
            <v-img
              :src="item.avatar"
              width="inherit"
              height="inherit"/>
          </v-avatar>
          <div class="item-info">
            <div class="item-title">
              {{ item.name }}
            </div>
            <div class="item-desc">
              <div>
                {{ item.intro }}
              </div>
              <div>
                {{ item.career }}
              </div>
            </div>
            <div class="item-detail">
              <span class="teacher">
                {{ item.level | formatTeacherLevel }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-pagination
      class="my-10"
      v-model="currentPage"
      :length="totalPage"
      circle/>
    <v-navigation-drawer
      class="deep-grey"
      v-model="isShowAsideFilter"
      absolute
      temporary
      left
      width="260px"
      @close="isShowAsideFilter = false">

    </v-navigation-drawer>
  </div>
</template>

<script>
    import {searchResultList} from "@/views/search/searchResult/searchTeachers/mockData";
    import {searchTeachers} from "@/api";

    /**
     * @description 搜索结果组件（讲师）
     * @property {String} value 搜索关键词
     * @property {String} showFilter 控制过滤器显示与隐藏
     * @example <searchCourses v-model="..." :showFilter="true"/>
     */
    export default {
        name: "searchCourses",
        props: {
            value: {
                type: String,
                default: ""
            },
            showFilter: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                isShowFilter: this.showFilter, //是否显示过滤器
                isShowAsideFilter: false, //是否显示侧边弹出过滤器
                searchResultList: [], //搜索结果列表
                currentPage: 1, //当前页码
                totalPage: 4, //总页数
            }
        },
        methods: {
            // 获取搜索结果列表
            getSearchResult() {
                this.searchResultList = searchResultList;
                searchTeachers(this.searchValue, this.currentPage).then(res => {
                    this.searchResultList = res.data.items
                }).catch(err => {
                    console.error(err);
                });
            },
            /**
             * 跳转讲师详情页
             * @param {String} id 讲师ID
             */
            gotoTeacherDetail(id) {
                this.$router.push(`/teacher/${id}`);
            },
        },
        computed: {
            // 屏幕宽度实时数值
            windowWidth() {
                return this.$store.state.screenWidth + 5;
            },
            // 映射props中的type，强制在值变化时触发监听器
            getShowFilter() {
                return this.showFilter;
            },
            // 搜索关键词
            searchValue() {
                return this.value;
            }
        },
        watch: {
            windowWidth(nval, oval) {
                if (nval < oval && nval < 800) {
                    this.isShowFilter = false; //在窗口宽度低于800的时候关闭过滤器
                }
                else if (nval > oval && nval > 800) {
                    this.isShowAsideFilter = false; //在窗口宽度高于800的时候关闭侧边弹出过滤器
                    this.isShowFilter = true;
                }
            },
            getShowFilter(nval) {
                this.isShowFilter = this.getShowFilter;
            },
            isShowFilter(nval, oval) {
                if (nval !== oval) {
                    this.$emit('switchFilter', nval);
                    if (this.windowWidth <= 800) {
                        this.isShowAsideFilter = this.isShowFilter;
                    }
                }
            },
            isShowAsideFilter(nval, oval) {
                if (nval !== oval) {
                    this.$emit('switchFilter', nval);
                }
            },
            searchValue() {
                this.getSearchResult();
            },
            currentPage() {
                this.getSearchResult();
            }
        },
        filters: {
            /**
             * 格式化讲师头衔
             * @param {String} level 讲师头衔ID
             * @return {String} 格式化后的讲师头衔
             */
            formatTeacherLevel(level) {
                return ['', '高级讲师', '首席讲师'][Number(level)];
            },
        },
        mounted() {

        },
        created() {
            if (this.showFilter) {
                if (this.windowWidth < 900) {
                    this.isShowFilter = false;
                }
            }
            this.getSearchResult();
        }
    }
</script>

<style lang="scss" scoped>
  @import "searchTeachers";
</style>